<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/iconfont.css">
</head>

<body>
    <div class="small-rabbit">
        <header>
            <div class="header wrapper">
                <ul>
                    <li>
                        <a href="#" class="active">请先登录</a>
                    </li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li>
                        <img src="./images/phone.svg" alt="">
                        <a href="#">手机版</a>
                    </li>
                </ul>
            </div>
        </header>
        <nav>
            <div class="nav wrapper">
                <div class="nav-logo">
                    <a href="#">小兔鲜儿</a>
                </div>
                <div class="nav-list">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">生鲜</a></li>
                        <li><a href="#">美食</a></li>
                        <li><a href="#">餐厨</a></li>
                        <li><a href="#">电器</a></li>
                        <li><a href="#">居家</a></li>
                        <li><a href="#">洗护</a></li>
                        <li><a href="#">孕婴</a></li>
                        <li><a href="#">服装</a></li>
                    </ul>
                </div>
                <div class="nav-search">
                    <img src="./images/search.svg" alt="">
                    <input type="text" placeholder="搜一搜">
                </div>
                <div class="nav-cart pos-r">
                    <img src="./images/cart.svg" alt="">
                    <!-- <span class="sub-two">2</span> -->
                </div>
            </div>
        </nav>
        <main>
            <div class="content-sec1 wrapper content">
                <div class="content-sec1-left">
                    <dl>
                        <dt>生鲜</dt>
                        <dd>水果</dd>
                        <dd>蔬菜</dd>
                    </dl>
                    <dl>
                        <dt>美食</dt>
                        <dd>面点</dd>
                        <dd>干果</dd>
                    </dl>
                    <dl>
                        <dt>餐厨</dt>
                        <dd>数码产品</dd>
                    </dl>
                    <dl>
                        <dt>电器</dt>
                        <dd>床品</dd>
                        <dd>四件套</dd>
                        <dd>被枕</dd>
                    </dl>
                    <dl>
                        <dt>居家</dt>
                        <dd>奶粉</dd>
                        <dd>玩具</dd>
                        <dd>辅食</dd>

                    </dl>
                    <dl>
                        <dt>洗护</dt>
                        <dd>洗发</dd>
                        <dd>洗护</dd>
                        <dd>美妆</dd>
                    </dl>
                    <dl>
                        <dt>孕婴</dt>
                        <dd>奶粉</dd>
                        <dd>玩具</dd>
                    </dl>
                    <dl>
                        <dt>服饰</dt>
                        <dd>女装</dd>
                        <dd>男装</dd>
                    </dl>
                    <dl>
                        <dt>杂货</dt>
                        <dd>户外</dd>
                        <dd>图书</dd>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>品牌制造</dd>
                    </dl>
                </div>
                <div class="content-sec1-right">
                    <div class="sec1-right-list">
                        <ul>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content-sec2 wrapper content">
                <div class="content-sec2-top">
                    <div class="sec2-top-title">
                        <h2>新鲜好物</h2>
                        <p>新鲜出炉 品质靠谱</p>
                        <span class="pos-r">查看全部</span>
                    </div>
                    <div class="sec2-top-list">
                        <div class="list-details">
                            <img src="./images/top1.png" alt="">
                            <p>KN95级莫兰迪色防护口罩</p>
                            <p>￥79</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/top2.png" alt="">
                            <p>紫檀外独板三层普洱茶盒</p>
                            <p>￥566</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/top3.png" alt="">
                            <p>法拉蒙高颜值记事本可定制</p>
                            <p>￥58</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/top4.png" alt="">
                            <p>科技布布艺沙发</p>
                            <p>￥3579</p>
                        </div>
                    </div>
                </div>
                <div class="content-sec2-bottom">
                    <div class="sec2-bottom-title">
                        <h2>人气推荐</h2>
                        <p>人气爆款 不容错过</p>
                    </div>
                    <div class="sec2-bottom-list">
                        <div class="list-details">
                            <img src="./images/bottom1.png" alt="">
                            <p>特惠推荐</p>
                            <p>我猜得到你的需要</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/bottom2.png" alt="">
                            <p>爆款推荐</p>
                            <p>人气好物推荐</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/bottom3.png" alt="">
                            <p>节日礼品一站买全</p>
                            <p>编辑尽心整理推荐</p>
                        </div>
                        <div class="list-details">
                            <img src="./images/bottom4.png" alt="">
                            <p>鲜花园艺</p>
                            <p>给生活增加仪式感</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-sec3 wrapper content">
                <div class="sec3-hot-title">
                    <h2>热门品牌</h2>
                    <p>国际经典 品牌认证</p>
                    <a class="pos-r" href="#">
                        <span class="pos-r"></span>
                        <span class="pos-r"></span>
                    </a>
                </div>
                <div class="sec3-hot-list">
                    <img src="./images/hot1.png" alt="">
                    <img src="./images/hot2.png" alt="">
                    <img src="./images/hot3.png" alt="">
                    <img src="./images/hot4.png" alt="">
                    <img src="./images/hot5.png" alt="">
                </div>
            </div>

            <div class="content-sec4 wrapper content">
                <div class="sec4-sx-title">
                    <h2>生鲜</h2>
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">蔬菜</a></li>
                        <li><a href="#">肉禽蛋</a></li>
                        <li><a href="#">水果</a></li>
                        <li><a href="#">海鲜</a></li>
                        <li><a href="#">零食</a></li>
                        <li><a href="#">饮料</a></li>
                    </ul>
                    <span class="pos-r">查看全部</span>
                </div>
                <div class="sec4-sx-list">
                    <div class="sx-left-banner">
                        <img src="./images/left-banner.png" alt="">
                    </div>
                    <div class="sx-right-banner">

                        <li><a href="#">
                                <img src="./images/right-banner1.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>双味千层，手抓饼烤肉组合</p>
                                    <p>240g/袋4片装</p>
                                    <p>￥89.99</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="./images/right-banner2.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>云南甘蔗慢熬红糖馒头</p>
                                    <p>220g/袋5个装</p>
                                    <p>加热即食</p>
                                    <p>¥9.00</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./images/right-banner3.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>日式风味小圆饼</p>
                                    <p>圆形【海盐味】</p>
                                    <p>糖果零食</p>
                                    <p>￥89.99</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./images/right-banner4.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>全麦奶油浓香小面包</p>
                                    <p>50g*12袋</p>
                                    <p>美味西点</p>
                                    <p>￥69.00</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./images/right-banner5.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>秘制外皮五福摩提大福点心</p>
                                    <p>50g/盒</p>
                                    <p>美味西点</p>
                                    <p>￥39.99</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a class="active" href="#">
                                <img src="./images/right-banner6.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>水果面膜韩国蜂蜜柚子茶</p>
                                    <p>240g/袋4片装</p>
                                    <p>￥89.99</p>
                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./images/right-banner7.png" alt="">

                                <div class="sx-right-img-details">
                                    <p>浓情比利时巧克力礼盒装</p>
                                    <p>205克/盒</p>
                                    <p>糖果零食</p>
                                    <p>￥120.00</p>

                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./images/right-banner8.png" alt="">
                                <div class="sx-right-img-details">
                                    <p>抹茶奶油小蛋糕礼盒装</p>
                                    <p>220克/盒</p>
                                    <p>美味西点</p>
                                    <p>￥60.00</p>
                                </div>
                                <div class="similar-details">
                                    <p>找相似</p>
                                    <span class="pos-r">发现更多宝贝</span>
                                </div>
                            </a>
                        </li>
                    </div>
                </div>
            </div>
            <div class="content-sec5 wrapper content">
                <div class="sec5-zx-title">
                    <h2>最新专题</h2>
                    <span class="pos-r">查看全部</span>
                </div>
                <div class="sec5-zx-list">
                    <div class="zx-list-item">
                        <img src="./images/zx1.png" alt="">
                        <div class="item-details-price pos-r">
                            <div class="item-details">
                                <p>吃这些美食才不算辜负自</p>
                                <p>餐圆起居洗护好物</p>
                            </div>
                            <div class="item-price">
                                <span>￥29.9起</span>
                            </div>
                        </div>
                        <div class="item-enjoy">
                            <div class="enjoy-left">
                                <span class="iconfont icon-like-line">1220</span>
                                <span class="iconfont icon-yanjing">1800</span>
                            </div>
                            <div class="enjoy-right">
                                <span class="iconfont icon-xiaoxi">246</span>
                            </div>
                        </div>
                    </div>
                    <div class="zx-list-item">
                        <img src="./images/zx2.png" alt="">
                        <div class="item-details-price pos-r">
                            <div class="item-details">
                                <p>吃这些美食才不算辜负自</p>
                                <p>餐圆起居洗护好物</p>
                            </div>
                            <div class="item-price">
                                <span>￥29.9起</span>
                            </div>
                        </div>
                        <div class="item-enjoy">
                            <div class="enjoy-left">
                                <span class="iconfont icon-like-line">1220</span>
                                <span class="iconfont icon-yanjing">1800</span>
                            </div>
                            <div class="enjoy-right">
                                <span class="iconfont icon-xiaoxi">246</span>
                            </div>
                        </div>
                    </div>
                    <div class="zx-list-item">
                        <img src="./images/zx3.png" alt="">
                        <div class="item-details-price pos-r">
                            <div class="item-details">
                                <p>吃这些美食才不算辜负自</p>
                                <p>餐圆起居洗护好物</p>
                            </div>
                            <div class="item-price">
                                <span>￥29.9起</span>
                            </div>
                        </div>
                        <div class="item-enjoy">
                            <div class="enjoy-left">
                                <span class="iconfont icon-like-line">1220</span>
                                <span class="iconfont icon-yanjing">1800</span>
                            </div>
                            <div class="enjoy-right">
                                <span class="iconfont icon-xiaoxi">246</span>
                            </div>
                        </div>
                    </div>
                </div>
        </main>
        <footer>
            <div class="footer wrapper">
                <div class="footer-top">
                    <span class="pos-r">价格亲民</span>
                    <span class="pos-r">物流快捷</span>
                    <span class="pos-r">品质新鲜</span>
                    <span class="pos-r">售后无忧</span>

                </div>
                <div class="footer-bottom">
                    <div class="footer-left-list">
                        <dl>
                            <dt>购物指南</dt>
                            <dd>购物流程</dd>
                            <dd>支付方式</dd>
                            <dd>售后规则</dd>
                        </dl>
                        <dl>
                            <dt>配送方式</dt>
                            <dd>配送运费</dd>
                            <dd>配送范围</dd>
                            <dd>配送时间</dd>
                        </dl>
                        <dl>
                            <dt>关于我们</dt>
                            <dd>平台规则</dd>
                            <dd>联系我们</dd>
                            <dd>问题反馈</dd>
                        </dl>
                        <dl>
                            <dt>售后服务</dt>
                            <dd>售后政策</dd>
                            <dd>退款说明</dd>
                            <dd>取消订单</dd>
                        </dl>
                        <dl>
                            <dt>服务热线</dt>
                            <dd>在线客服</dd>
                            <dd>客服电话400-0000-000</dd>
                            <dd>工作时间周一至周日8:00-18:00</dd>
                        </dl>
                    </div>
                    <div class="footer-right-list">
                        <div class="wx-code">
                            <img src="./images/wx-code.png" alt="">
                            <span>微信公众号</span>
                        </div>
                        <div class="app-code">
                            <img src="./images/app-code.png" alt="">
                            <span>APP下载二维码</span>
                        </div>
                    </div>
                </div>
                <div class="footer-copy">
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">售后服务</a></li>
                        <li><a href="#">配送与验收</a></li>
                        <li><a href="#">商务合作</a></li>
                        <li><a href="#">搜索推荐</a></li>
                        <li><a href="#">友情链接</a></li>
                    </ul>
                    <p>CopyRight&copy;小兔鲜</p>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>